{% extends "base.html" %}
{% block title %}钉钉消息仪表板{% endblock %}
{% block content %}
<style>
/* 仪表板液态玻璃效果样式 */
.dashboard-container {
    position: relative;
    z-index: 1;
}

/* 液态玻璃统计卡片 */
.card {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: var(--glass-shadow) !important;
    transition: var(--transition) !important;
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
    z-index: 0;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2) !important;
}

.card-body, .card-header {
    position: relative;
    z-index: 1;
}

/* 液态玻璃统计卡片特殊样式 */
.stat-card-primary {
    background: rgba(0, 122, 255, 0.1) !important;
    border-color: rgba(0, 122, 255, 0.2) !important;
}

.stat-card-primary:hover {
    background: rgba(0, 122, 255, 0.15) !important;
    border-color: rgba(0, 122, 255, 0.3) !important;
}

.stat-card-success {
    background: rgba(52, 199, 89, 0.1) !important;
    border-color: rgba(52, 199, 89, 0.2) !important;
}

.stat-card-success:hover {
    background: rgba(52, 199, 89, 0.15) !important;
    border-color: rgba(52, 199, 89, 0.3) !important;
}

.stat-card-warning {
    background: rgba(255, 149, 0, 0.1) !important;
    border-color: rgba(255, 149, 0, 0.2) !important;
}

.stat-card-warning:hover {
    background: rgba(255, 149, 0, 0.15) !important;
    border-color: rgba(255, 149, 0, 0.3) !important;
}

.stat-card-info {
    background: rgba(90, 200, 250, 0.1) !important;
    border-color: rgba(90, 200, 250, 0.2) !important;
}

.stat-card-info:hover {
    background: rgba(90, 200, 250, 0.15) !important;
    border-color: rgba(90, 200, 250, 0.3) !important;
}

/* 液态玻璃表格 */
.table {
    background: transparent !important;
    color: #1C1C1E !important;
}

.table thead th {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border-color: var(--glass-border) !important;
    color: #1C1C1E !important;
    font-weight: 600 !important;
    border-bottom: 2px solid var(--glass-border) !important;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.table thead th::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
    z-index: 0;
}

.table tbody td {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #1C1C1E !important;
    transition: var(--transition) !important;
}

.table tbody tr:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: scale(1.01);
    transition: var(--transition) !important;
}

/* 液态玻璃进度条 */
.progress {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 1rem !important;
    overflow: hidden;
}

.progress-bar {
    border-radius: 1rem !important;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 液态玻璃徽章 */
.badge {
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    font-weight: 600 !important;
    transition: var(--transition) !important;
}

.badge:hover {
    transform: scale(1.05);
}

/* 液态玻璃按钮 */
.btn {
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: var(--transition) !important;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

/* 液态玻璃图表容器 */
canvas {
    border-radius: var(--border-radius-sm);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: var(--glass-blur-light);
    -webkit-backdrop-filter: var(--glass-blur-light);
    padding: 1rem;
}

/* 液态玻璃空状态 */
.text-center.py-4 {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: var(--glass-blur-light);
    -webkit-backdrop-filter: var(--glass-blur-light);
    border-radius: var(--border-radius);
    border: 1px solid var(--glass-border);
    margin: 1rem 0;
}

/* 液态玻璃标题 */
h2, h5 {
    color: #1C1C1E !important;
    text-shadow: 0 2px 4px rgba(0, 122, 255, 0.1);
}

/* 液态玻璃图标 */
.fas {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    transition: var(--transition);
}

.card:hover .fas {
    transform: scale(1.1);
}

/* 液态玻璃数字 */
.card-title {
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 暗黑模式适配 */
[data-theme="dark"] .card {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .card::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
}

/* 暗黑模式下的统计卡片 */
[data-theme="dark"] .stat-card-primary {
    background: rgba(0, 122, 255, 0.15) !important;
    border-color: rgba(0, 122, 255, 0.3) !important;
}

[data-theme="dark"] .stat-card-primary:hover {
    background: rgba(0, 122, 255, 0.2) !important;
    border-color: rgba(0, 122, 255, 0.4) !important;
}

[data-theme="dark"] .stat-card-success {
    background: rgba(52, 199, 89, 0.15) !important;
    border-color: rgba(52, 199, 89, 0.3) !important;
}

[data-theme="dark"] .stat-card-success:hover {
    background: rgba(52, 199, 89, 0.2) !important;
    border-color: rgba(52, 199, 89, 0.4) !important;
}

[data-theme="dark"] .stat-card-warning {
    background: rgba(255, 149, 0, 0.15) !important;
    border-color: rgba(255, 149, 0, 0.3) !important;
}

[data-theme="dark"] .stat-card-warning:hover {
    background: rgba(255, 149, 0, 0.2) !important;
    border-color: rgba(255, 149, 0, 0.4) !important;
}

[data-theme="dark"] .stat-card-info {
    background: rgba(90, 200, 250, 0.15) !important;
    border-color: rgba(90, 200, 250, 0.3) !important;
}

[data-theme="dark"] .stat-card-info:hover {
    background: rgba(90, 200, 250, 0.2) !important;
    border-color: rgba(90, 200, 250, 0.4) !important;
}

[data-theme="dark"] .table thead th {
    background: rgba(0, 0, 0, 0.3) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .table thead th::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
}

[data-theme="dark"] .table tbody td {
    color: #ffffff !important;
}

[data-theme="dark"] .table tbody tr:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] h2, [data-theme="dark"] h5 {
    color: #ffffff !important;
}

[data-theme="dark"] .text-center.py-4 {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] canvas {
    background: rgba(0, 0, 0, 0.2);
}

/* 液态玻璃动画 */
@keyframes cardFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.card {
    animation: cardFloat 6s ease-in-out infinite;
}

.card:nth-child(2) {
    animation-delay: 1s;
}

.card:nth-child(3) {
    animation-delay: 2s;
}

.card:nth-child(4) {
    animation-delay: 3s;
}

/* 液态玻璃响应式 */
@media (max-width: 768px) {
    .card {
        margin-bottom: 1rem;
    }
    
    .table-responsive {
        border-radius: var(--border-radius-sm);
        overflow: hidden;
    }
}
</style>

<div class="dashboard-container">
<div class="row">
    <div class="col-12">
        <h2 class="mb-4">📊 钉钉消息仪表板</h2>
        <small class="text-muted">此仪表板仅显示钉钉消息相关的统计数据</small>
    </div>
</div>

<!-- 统计卡片 -->
<div class="row align-items-stretch mb-4">
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card h-100 stat-card-primary">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h4 class="card-title mb-0 text-primary">{{ task_count }}</h4>
                        <small class="text-muted">总任务数</small>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-tasks fa-2x text-primary"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card h-100 stat-card-success">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h4 class="card-title mb-0 text-success">{{ active_task_count }}</h4>
                        <small class="text-muted">已启用任务</small>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-play-circle fa-2x text-success"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card h-100 stat-card-warning">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h4 class="card-title mb-0 text-warning">{{ robot_count }}</h4>
                        <small class="text-muted">机器人数量</small>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-robot fa-2x text-warning"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card h-100 stat-card-info">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h4 class="card-title mb-0 text-info">{{ script_count }}</h4>
                        <small class="text-muted">钉钉消息脚本数</small>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-code fa-2x text-info"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 执行统计和图表 -->
<div class="row align-items-stretch">
    <div class="col-xl-4 col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-header">
                <h5 class="mb-0">📈 最近7天钉钉消息执行统计</h5>
            </div>
            <div class="card-body">
                <div class="row text-center">
                    <div class="col-4">
                        <h3 class="text-success">{{ success_count }}</h3>
                        <small class="text-muted">成功</small>
                    </div>
                    <div class="col-4">
                        <h3 class="text-danger">{{ failed_count }}</h3>
                        <small class="text-muted">失败</small>
                    </div>
                                            <div class="col-4">
                            {% if success_rate is defined %}
                            <h3 class="text-dark">{{ success_rate }}%</h3>
                            <small class="text-muted">成功率</small>
                            {% else %}
                            <h3 class="text-dark">--</h3>
                            <small class="text-muted">暂无数据</small>
                            {% endif %}
                        </div>
                </div>
                {% if success_rate is defined %}
                <div class="mt-3">
                    <div class="progress">
                        <div class="progress-bar bg-success" style="width: {{ success_rate }}%;"></div>
                        <div class="progress-bar bg-danger" style="width: {{ 100 - success_rate }}%;"></div>
                    </div>
                </div>
                {% endif %}
                <div class="text-center text-muted mt-2">
                    <small>总执行次数: {{ total_executions }}</small>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-4 col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-header">
                <h5 class="mb-0">⏰ 最近24小时钉钉消息执行统计</h5>
            </div>
            <div class="card-body">
                <div class="row text-center">
                    <div class="col-4">
                        <h3 class="text-success">{{ success_24h }}</h3>
                        <small class="text-muted">成功</small>
                    </div>
                    <div class="col-4">
                        <h3 class="text-danger">{{ failed_24h }}</h3>
                        <small class="text-muted">失败</small>
                    </div>
                    <div class="col-4">
                        {% if success_rate_24h is defined %}
                        <h3 class="text-dark">{{ success_rate_24h }}%</h3>
                        <small class="text-muted">成功率</small>
                        {% else %}
                        <h3 class="text-dark">--</h3>
                        <small class="text-muted">暂无数据</small>
                        {% endif %}
                    </div>
                </div>
                {% if success_rate_24h is defined %}
                <div class="mt-3">
                    <div class="progress">
                        <div class="progress-bar bg-success" style="width: {{ success_rate_24h }}%;"></div>
                        <div class="progress-bar bg-danger" style="width: {{ 100 - success_rate_24h }}%;"></div>
                    </div>
                </div>
                {% endif %}
                <div class="mt-2 text-center">
                    <small class="text-muted">总执行次数: {{ total_24h }}</small>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-4 col-md-12 mb-4">
        <div class="card h-100">
            <div class="card-header">
                <h5 class="mb-0">📊 钉钉消息执行分布</h5>
            </div>
            <div class="card-body">
                <canvas id="executionChart" width="400" height="200"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- 各任务24小时执行情况 -->
<div class="card mb-4">
    <div class="card-header">
        <h5 class="mb-0">📋 各钉钉消息任务24小时执行情况</h5>
    </div>
    <div class="card-body">
        {% if task_stats_24h %}
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>任务名称</th>
                        <th>总执行次数</th>
                        <th>成功次数</th>
                        <th>失败次数</th>
                        <th>成功率</th>
                        <th>状态</th>
                    </tr>
                </thead>
                <tbody>
                    {% for task_name, stats in task_stats_24h.items() %}
                    <tr>
                        <td>
                            <strong>{{ task_name }}</strong>
                        </td>
                        <td>
                            <span class="badge bg-secondary">{{ stats.total }}</span>
                        </td>
                        <td>
                            <span class="badge bg-success">{{ stats.success }}</span>
                        </td>
                        <td>
                            <span class="badge bg-danger">{{ stats.failed }}</span>
                        </td>
                        <td>
                            <div class="d-flex align-items-center">
                                {% if stats is defined and stats.success_rate is defined %}
                                <span class="me-2">{{ "%.1f"|format(stats.success_rate) }}%</span>
                                <div class="progress flex-grow-1" style="height: 6px;">
                                    <div class="progress-bar bg-success" style="width: {{ stats.success_rate }}%;"></div>
                                </div>
                                {% else %}
                                <span class="text-muted">暂无数据</span>
                                {% endif %}
                            </div>
                        </td>
                        <td>
                            {% if stats is defined and stats.success_rate is defined %}
                                {% if stats.success_rate >= 80 %}
                                    <span class="badge bg-success">优秀</span>
                                {% elif stats.success_rate >= 60 %}
                                    <span class="badge bg-warning">良好</span>
                                {% else %}
                                    <span class="badge bg-danger">需关注</span>
                                {% endif %}
                            {% else %}
                                <span class="badge bg-secondary">暂无数据</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="text-center py-4">
            <i class="fas fa-chart-bar fa-3x text-muted mb-3"></i>
            <p class="text-muted">最近24小时内暂无任务执行记录</p>
        </div>
        {% endif %}
    </div>
</div>

<!-- 最近执行任务 -->
<div class="card">
    <div class="card-header">
        <h5 class="mb-0">🕒 最近执行任务</h5>
    </div>
    <div class="card-body">
        {% if recent_executions %}
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>任务名称</th>
                        {% if current_user.is_administrator() %}
                        <th>归属用户</th>
                        {% endif %}
                        <th>执行时间</th>
                        <th>持续时间</th>
                        <th>状态</th>
                        <th>日志类型</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for execution in recent_executions %}
                    <tr>
                        <td>
                            <strong>{{ execution.task.name if execution.task else '未知任务' }}</strong>
                        </td>
                        {% if current_user.is_administrator() %}
                        <td>
                            {% if execution.task and execution.task.user %}
                                <span class="badge bg-secondary">{{ execution.task.user.username }}</span>
                            {% else %}
                                <span class="text-muted">未知用户</span>
                            {% endif %}
                        </td>
                        {% endif %}
                        <td>
                            <small>{{ execution.start_time.strftime('%m-%d %H:%M:%S') }}</small>
                        </td>
                        <td>
                            <small>{% if execution.duration is not none %}{{ "%.2f"|format(execution.duration) }}s{% else %}--{% endif %}</small>
                        </td>
                        <td>
                            {% if execution.status == '成功' %}
                                <span class="badge bg-success">{{ execution.status }}</span>
                            {% else %}
                                <span class="badge bg-danger">{{ execution.status }}</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if execution.log_type == 'script_execution' %}
                                <span class="badge bg-info">脚本执行</span>
                            {% elif execution.log_type == 'dingtalk_log' %}
                                <span class="badge bg-warning">消息发送</span>
                            {% else %}
                                <span class="badge bg-secondary">系统日志</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if execution.task %}
                            <a href="{{ url_for('task_logs_page', task_id=execution.task.id) }}" 
                               class="btn btn-sm btn-outline-secondary">
                                <i class="fas fa-eye"></i> 查看日志
                            </a>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="text-center py-4">
            <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
            <p class="text-muted">暂无执行记录</p>
        </div>
        {% endif %}
    </div>
</div>

<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
/* 以下代码包含Jinja2模板语法，IDE可能会显示语法错误，但实际运行时是正确的 */
/* eslint-disable */
document.addEventListener('DOMContentLoaded', function() {
    const ctx = document.getElementById('executionChart').getContext('2d');
    
    // 使用Jinja2模板变量构建图表数据
    // 确保只显示钉钉消息统计数据
    const data = {
        labels: ['消息发送成功', '消息发送失败'],
        datasets: [{
            // 注意：以下行包含Jinja2模板语法
            data: [{{ dingtalk_success|default(0) }}, {{ dingtalk_failed|default(0) }}],
            backgroundColor: [
                '#ffc107',  // 钉钉成功 - 黄色
                '#fd7e14'   // 钉钉失败 - 橙色
            ],
            borderWidth: 2,
            borderColor: '#fff'
        }]
    };
    
    const config = {
        type: 'doughnut',
        data: data,
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: {
                        padding: 20,
                        usePointStyle: true
                    }
                },
                title: {
                    display: true,
                    text: '钉钉消息统计',
                    font: {
                        size: 14
                    }
                }
            }
        }
    };
    
    new Chart(ctx, config);
});
/* eslint-enable */
</script>
</div>
{% endblock %}
